<template>
  <div :class="`tw-cameralist x${_uid}`">
    <div class="tw-cameralist-list">
      <el-button type="text" @click="handleClick(itm)"
      v-for="(itm, idx) in list" :key="idx"
      class="tw-cameralist-item"
      :style="{top: itm.top, left: itm.left,width:width,height:height}" >
        <template v-if="itm.error">
          <img class="xcamera" v-if="imgerr[0] && imgerr[0] !== ''" :src="`${$twApp.fileBaseUrl}${imgerr[0].localPath}`" />
          <img src='@assets/camera-error.png' class="xcamera" v-else/>
        </template>
        <template v-else>
          <img class="xcamera" v-if="imgsuc[0] && imgsuc[0] !== ''" :src="`${$twApp.fileBaseUrl}${imgsuc[0].localPath}`" />
          <img src='@assets/camera.png' class="xcamera" v-else/>
        </template>
      </el-button>
    </div>
  </div>
</template>

<script>
const props = require('./props')
import style from '../tw-lib-base/style'

export default {
  name: 'camera-list',

  mixins: [style],

  props,

  computed: {
    style () {
      return {
        itemBgImg: this.itemBgImg
      }
    }
  },

  mounted () {

  },

  data () {
    return {
    }
  },
  methods: {
    handleClick (tab) {
      if (tab.href) {
        if (tab.target === '_blank') {
          window.open(tab.href, '_blank')
        } else {
          window.location.href = tab.href
        }
      }
    },
    setStyle () {
      let style = ''

      if (this.itemBgImg && this.itemBgImg[0]) {
        style += `
          ::root.tw-cameralist {
            background-image: url("${this.$twApp.fileBaseUrl}${this.itemBgImg[0].localPath}");
          }
        `
      }

      this.addStyle(style)
    }
  },

  watch: {
    // data: {
    //   deep: true,
    //   handler () {
    //     // this.init()
    //   }
    // },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
